<template>
	<view class="order-wrap page-bg">
		<scroll-view class="scroll-menu" scroll-x="true">
			<view v-for="item in navs" :key='item.id' :class="item.id === currentNavId?'menu-item menu-item-active':'menu-item'"
			 @click="setActive(item.id)">
				{{item.title}}
				<text class="after-line"></text>
			</view>
		</scroll-view>
		<view v-if="items.length > 0" class="order-list">
			<block v-for="item in items" :key='item.id'>
				<view class="order-group" >
					<block v-for="shop in item.gropByShop" :key='shop.shopId'>
						<view class="order-shop">
							<view class="order-shop-name link">{{shop.shopName}}</view>
							<view v-if='item.status === 0' class="order-status status-dfk">待付款</view>
							<view v-if='item.status === 2' class="order-status status-dfh">待发货</view>
							<view v-if='item.status === 3' class="order-status status-dsh">待收货</view>
							<view v-if='item.status === 5' class="order-status status-ywc">已完成</view>
						</view>

						<view class="goods-item" v-for="goods in shop.orderItem" :key='goods.id' @click="link('/pages/mine/orderDetail?id='+item.id)">
							<image class="goods-img" :src="goods.imgUrl"></image>
							<view class="goods-info">
								<view class="goods-title">{{goods.comTitle}}</view>
								<view class="goods-sepc">{{goods.skuName}}</view>
								<view class="goods-price">
									<text class="price yuan">{{goods.price}}</text>
									<text class="goods-num">x{{goods.qty}}</text>
								</view>
							</view>
						</view>
					</block>
						<view class="should-price">共{{item.qty}}件商品，应付款: <text class="price yuan">{{item.actualAmount | formatMoney}}</text></view>
					<block v-if='item.status === 0'>
						<view class="order-btns">
							<view class="order-limit">
								<!-- 23小时后关闭订单 -->
							</view>
							<view class="order-op">
								<text class="op op-cancel" @click="delOrder(item.id)">取消订单</text>
								<text class="op op-buy" @click="payOrder(item.id)">立即付款</text>
							</view>
						</view>
					</block>
					<block v-if='item.status === 2'>
					</block>
					<block v-if='item.status === 3'>
						<view class="order-btns">
							<view class="order-limit order-kd">快递单号-{{item.CourierNumber}}</view>
							<view class="order-op">
								<text class="op op-sh">确认收货</text>
							</view>
						</view>
					</block>
					<!-- <block v-if='item.status === 5'>
						<view class="order-btns">
							<view class="order-limit icon-del"></view>
							<view class="order-op">
								<text class="op op-again">再次购买</text>
							</view>
						</view>
					</block> -->
				</view>
			</block>
			<footerInfo :text='text'></footerInfo>
		</view>
		<view class="desc no-info" v-if="items.length <= 0">您还没有相关订单信息~</view>
	</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				text: '已经没有更多了',
				currentNavId: 'all',
				navs: [],
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
			}
		},

		onLoad(options) {
			this.pageSize = common.pageSize
			this.navs = common.orderArr
			this.currentNavId = parseInt(options.status) || 'all'
			this.getItems()
		},
		
		onShow() {
			
		},

		methods: {
			setActive(id) {
				this.currentNavId = id
				this.pageIndex = 1
				this.items = []
				this.getItems()
			},

			link(url) {
				this.$link(url)
			},

			getItems() {
				let status = this.currentNavId
				if (status === 'all') { status = '' }
				let { pageIndex, pageSize } = this.$data
				api.returnUserOrderPages({
					status,pageIndex, pageSize, orderType: 3
				}, (res) => {
					this.totalCount = res.totalCount
					if (this.pageSize > res.totalCount) {
						this.text = '已经没有更多了~'
					}
					this.items = [...this.items, ...res.items]
				})
			},
			
			delOrder(id) {
				this.$showModal('', '确认要执行此操作么？', () => {
					api.cancelOrder({id},(res) => {
						this.$showToast('操作成功~')
					}) 
				})
			},
			
			payOrder(id) {
				api.payByOrderId({id},(res) => {
					if(!res || !res.payParams) { this.$showToast('支付参数错误, 请稍后重试~'); return }
					let temp = { orderNo: res.orderNo, comTitle: res.comTitle, actualAmount }
					common.uniPay(JSON.parse(res.payParams), temp, () => {
						this.$showModal('','订单付款成功')
					})
				}) 
			}
		},

		onReachBottom() {
			if (this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			} else {
				this.pageIndex++
				this.getItems()
			}
		},

		components: {
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');

	.order-list {
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.order-group {
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20upx;
	}

	.order-group:last-child {
		margin-bottom: 0;
	}

	.order-shop {
		width: 100%;
		margin-bottom: 20upx;
		.flex-base;

		.order-shop-name {
			.flex-base;
			.f24;

			&::before {
				content: '';
				background: url() no-repeat left center;
				background-size: 22upx 22upx;
				display: block;
				width: 22upx;
				height: 24upx;
				padding-right: 10upx;
			}
		}

		.order-status {
			.fw;
		}

		.status-dfk {
			color: @theme-color;
		}

		.status-dfh {
			color: @font-orange-color;
			;
		}

		.status-dsh {
			color: @font-orange-color;
			;
		}

		.status-ywc {
			color: @font-base-color
		}
	}

	.goods-item {
		.flex-base;
		margin-bottom: 30upx;
		padding: 0;

		.goods-img {
			width: 150upx;
			height: 150upx;
			.br;
			margin-right: 30upx;
			flex-shrink: 0;
		}

		.goods-info {
			flex-grow: 2;
		}

		.goods-title {
			.f30;
			width: 100%;
		}

		.goods-sepc {
			.f24;
			color: @font-dark-color;
			padding: 10upx 0;
		}

		.goods-price {
			width: 100%;
			.flex-base;
			justify-content: space-between;

			.goods-num {
				.f24;
			}
		}

	}

	.should-price {
		padding-top: 30upx;
		border-top: 1px solid @border-color;
		margin-bottom: 30upx;
		text-align: right;
		.f24;

		.price {
			.fw;
			.f32;
			color: @theme-color;
		}
	}

	.order-btns {
		.flex-base;

		.order-limit {
			.f24;
			color: @font-dark-color;
		}

		.order-kd {
			color: @font-orange-color;
		}

		.icon-del {
			width: 30upx;
			height: 30upx;
		}

		.order-op {
			.op {
				height: 60upx;
				display: inline-block;
				border: 1px solid @border-color;
				border-radius: 60upx;
				text-align: center;
				line-height: 60upx;
				.f26;
				margin-left: 20upx;
				padding: 0 20upx;
			}

			.op-buy {
				color: @f;
				background: @font-orange-color;
			}

			.op-sh {
				border-color: @font-orange-color;
				color: @font-orange-color;
			}
		}

		.order-op {}

		.order-op {}
	}
</style>
